<template>
  <div>
    <div class="filter-tip">
      关于<span>{{tag}}</span>的文章
    </div>
    <div class="error" v-if="articleData.length === 0">
      <div class="empty-tip">'(*&gt;﹏&lt;*)'没有数据!</div>
    </div>
    <article-item :article="item" v-for="(item, index) in articleData" :key="index" />
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8083/api/'
import articleItem from '@/components/web/articleItem.vue'

export default {
  components: {
    articleItem
  },
  async asyncData ({params}) {
    const data = await axios.get('article/web/tag', {params: {tag: params.id}})
    return {
      articleData: data.data,
      tag: params.id
    }
  },
  head () {
    return {
      title: `${this.tag}的相关文章`
    }
  }
}
</script>

<style lang="scss">
  .filter-tip {
    text-align: center;
    font-size: 20px;
    padding-bottom: 20px;
    span {
      display: inline-block;
      color: #3084bb;
      font-weight: bold;
      padding: 0 2px;
    }
  }
  .error {
    padding: 60px 0;
    text-align: center;
    .empty-tip {
      font-size: 26px;
    }
  }
</style>